<!-- 考勤-基础设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        :showBack="false"
      ></pageHeaderNew>
    </template>
    <a-tabs lazy-load default-active-key="1" v-model:active-key="currTab">
      <a-tab-pane key="1" title="考勤设置">
        <div class="base-setting-warp">
          <div v-for="(item, index) in setting[0]" :key="index">
            <settingWrap
              @goDetail="goDetail(item)"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
            ></settingWrap>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" title="假期设置">
        <div class="base-setting-warp">
          <div v-for="(item, index) in setting[1]" :key="index">
            <settingWrap
              @goDetail="goDetail(item)"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
            ></settingWrap>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </ContentCard>
</template>

<script lang="ts" setup>
import useExamineTabsStore from '@/store/modules/base/examineTabs/index';
interface str {
  name: string;
  description: string;
  icon: string;
  path: string;
}
const router = useRouter();
const title = '基础设置';

const breadCrumb: string[] = ['组织', '基础设置'];
const examineTabsStore = useExamineTabsStore();
const currTab = computed({
  get: () => examineTabsStore.tabsValue['attendance'],
  set: (val: string) => {
    examineTabsStore.setTabs('attendance', val);
  }
});

const setting = reactive<str[][]>([
  [
    // {
    //   name: '考勤项目设置',
    //   description: `说明：设置月考勤表中您需要的考勤项`,
    //   icon: 'icon-settings',
    //   path: 'AttendanceMainSetting'
    // },

    {
      name: '考勤提醒',
      description: `说明：设置考勤提醒的配置`,
      icon: 'icon-settings',
      path: 'AttendanceRemind'
    },

    {
      name: '考勤周期',
      description: `说明：设置考勤周期的配置`,
      icon: 'icon-settings',
      path: 'AttendanceCycle'
    },
    // {
    //   name: '其他设置',
    //   description: `说明：根据相应的类型配置对应的异动原因`,
    //   icon: 'icon-settings',
    //   path: 'AttendanceOtherSetting'
    // },
    // {
    //   name: '操作记录',
    //   description: `说明：-`,
    //   icon: 'icon-settings',
    //   path: 'AttendanceRecord'
    // },
    {
      name: '工作日历',
      description: `说明：根据相应的类型配置对应的异动原因`,
      icon: 'icon-settings',
      path: 'WorkingCalendar'
    },
    {
      name: '打卡方式',
      description: `说明：根据相应的类型配置对应的异动原因`,
      icon: 'icon-settings',
      path: 'CheckInMethod'
    }
  ],
  [
    {
      name: '假期类型',
      description: `说明：配置假期类型`,
      icon: 'icon-settings',
      path: 'AttendanceHolidayType'
    },
    {
      name: '假期提醒设置',
      description: `说明：配置假期提醒`,
      icon: 'icon-settings',
      path: 'AttendanceHolidayRemind'
    }
    // {
    //   name: '假期操作记录',
    //   description: `说明：`,
    //   icon: 'icon-settings',
    //   path: 'AttendanceHolidayRecord'
    // }
  ]
]);

const goDetail = (item: str) => {
  router.push({
    name: item.path
  });
};
</script>

<style scoped lang="less">
.base-setting {
  &-warp {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }
}
.arco-divider-horizontal {
  margin-top: 0;
}

::v-deep .arco-tabs-nav::before {
  height: 0px !important;
}
</style>
